<template>
  <div class="app-container">
    <div class="title">{{ $t('merchantInfo.商家信息') }}</div>
    <el-form ref="ruleFormRef" style="max-width: 100%" :model="ruleForm" :rules="rules" label-width="auto"
      label-position="left" class="demo-ruleForm" :size="formSize" status-icon>
      <el-row :gutter="20" class="el-row">
        <el-col :span="12">
          <div style="display: flex;">
            <el-form-item prop="logo" class="m-right font16">
              <div slot="label" class="label">
                <div class="hei"><span class="reds"> * </span>{{ $t('merchantInfo.上传店铺logo') }}</div>
                <div class="wenjian">{{ $t('merchantInfo.支持jpg、jpeg、png格式 大小单张限制到3m内') }}</div>
              </div>
              <upload :fieldType="'logo'" :acceptType="'.jpg, .jpeg, .png'" :fileLists="fieldListlogo" @UserFileUrl="UserFileUrl" @DeleterFile="DeleterFile"></upload>
            </el-form-item>

          </div>
          <el-form-item :label="$t('merchantInfo.公司名称')" prop="name">
            <el-input v-model="ruleForm.name" :placeholder="$t('merchantInfo.请输入公司名称')" maxlength="100" />
          </el-form-item>
          <el-form-item class="hei" :label="$t('merchantInfo.店铺简介')" prop="content">
            <el-input v-model="ruleForm.content" type="textarea" maxlength="200"  :rows="4"
              :placeholder="$t('merchantInfo.请输入店铺简介（200字以内）')" />
          </el-form-item>


          <!-- <el-form-item :label="$t('merchantInfo.发货地址2')" prop="address1">
            <el-input v-model="ruleForm.address1" :placeholder="$t('merchantInfo.请输入发货地址2')" maxlength="100" />
          </el-form-item>
          <el-form-item :label="$t('merchantInfo.店铺客服账号')" prop="linktel">
            <el-input v-model="ruleForm.linktel" type="text" maxlength="11" @input="handleInput('linktel')" :placeholder="$t('merchantInfo.请输入店铺客服账号1')" />
          </el-form-item>
          <el-form-item :label="$t('merchantInfo.店铺客服账号2')" prop="linktel1">
            <el-input v-model="ruleForm.linktel1" type="text" :maxlength="11" @input="handleInput('linktel1')" :placeholder="$t('merchantInfo.请输入店铺客服账号2')" />
          </el-form-item> -->

        </el-col>
        <el-col :span="12">
          <el-form-item prop="bg_img">
            <div slot="label" class="label">
              <div class="hei"><span class="reds"> * </span>{{ $t('merchantInfo.上传店铺头图') }}</div>
              <div class="wenjian">{{ $t('merchantInfo.支持jpg、jpeg、png格式 大小单张限制到3m内') }}</div>
            </div>
            <upload :fieldType="'bg_img'" :acceptType="'.jpg, .jpeg, .png'" :fileLists="fieldListbg_img" @UserFileUrl="UserFileUrl"  @DeleterFile="DeleterFile"></upload>
          </el-form-item>

          <el-form-item :label="$t('merchantInfo.入驻时间')">
            <el-input v-model="ruleForm.CheckTime" :disabled="true" placeholder="系统时间不可选择系统当前时间" />
          </el-form-item>
          <!-- <el-form-item :label="$t('merchantInfo.代收付平台选择')" prop="dfgs_ids">
            <el-select v-model="ruleForm.dfgs_ids" multiple :placeholder="$t('merchantInfo.请选择代账平台')">
              <el-option v-for="item in dsfptoptions" :key="item.id" :label="item[CL('name')]" :value="item.id" />
            </el-select>
          </el-form-item> -->
          <el-form-item :label="$t('merchantInfo.发货地址')" prop="address">
            <el-input v-model="ruleForm.address" :placeholder="$t('merchantInfo.请输入发货地址')" maxlength="100" />
          </el-form-item>

          <!-- <el-form-item :label="$t('merchantInfo.店铺负责人账号')" prop="tel">
            <el-input v-model="ruleForm.tel" type="text" @input="handleInput('tel')" maxlength="11" :placeholder="$t('merchantInfo.请选择店铺负责人账号')" />
          </el-form-item> -->
        </el-col>
      </el-row>
      <div class="title">{{ $t('merchantInfo.商家实体公司信息') }}</div>
      <el-row :gutter="20" class="el-row">
        <el-col :span="12">
          <!-- <el-form-item :label="$t('merchantInfo.公司名称')" prop="company_name">
            <el-input v-model="ruleForm.company_name" maxlength="100" :placeholder="$t('merchantInfo.请输入公司名称')" />
          </el-form-item> -->
          <el-form-item :label="$t('merchantInfo.负责人姓名')" prop="fzr_name">
            <el-input v-model="ruleForm.fzr_name" maxlength="100" :placeholder="$t('merchantInfo.请输入负责人姓名')" />
          </el-form-item>
          <el-form-item :label="$t('merchantInfo.占地面积')" prop="zdmj">
            <el-input v-model="ruleForm.zdmj" type="number" @input="handleInput('zdmj')"  maxlength="10" :placeholder="$t('merchantInfo.请输入公司占地面积（㎡）')" />
          </el-form-item>
          <el-form-item :label="$t('merchantInfo.主营业务')" prop="desc">
            <el-input v-model="ruleForm.desc" type="textarea" maxlength="200"  :rows="4"
              :placeholder="$t('merchantInfo.请输入主营业务（200字以内）')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('merchantInfo.公司地址')" prop="company_address">
            <el-input v-model="ruleForm.company_address" maxlength="100" :placeholder="$t('merchantInfo.请输入公司地址')" />
          </el-form-item>
          <el-form-item :label="$t('merchantInfo.负责人联系电话')" prop="fzr_tel">
            <el-input v-model="ruleForm.fzr_tel" type="text" maxlength="11" @input="handleInput('fzr_tel')" placeholder="123 456 789" />
          </el-form-item>

          <el-form-item :label="$t('merchantInfo.在职员工')" prop="yuangong">
            <el-input v-model="ruleForm.yuangong" type="number" maxlength="10" @input="handleInput('yuangong')" :placeholder="$t('merchantInfo.输入在职员工数量')" />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 银行信息 -->
      <!-- <div class="title">账户类型</div> -->
      <!-- <el-row :gutter="20" class="el-row">
        <el-col :span="24">
          <el-form-item label="汇款账户" >
            <el-radio-group v-model="ruleForm.isPlatformAccount">
              <el-radio :value="1" size="large">平台账号</el-radio>
              <el-radio :value="2" size="large">商家账号</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="ruleForm.isPlatformAccount == 2">
          <el-form-item label="收款人" prop="skr_name">
            <el-input v-model="ruleForm.skr_name" maxlength="100" placeholder="请输入收款人" />
          </el-form-item>
          <el-form-item label="银行卡号" prop="cardnum">
            <el-input v-model="ruleForm.cardnum" maxlength="100" placeholder="请输入银行卡号" />
          </el-form-item>
          <el-form-item label="开户行名称" prop="card_name">
            <el-input v-model="ruleForm.card_name" maxlength="100" placeholder="请输入开户行名称" />
          </el-form-item>
        </el-col>
      </el-row> -->


      <el-form-item prop="cardnum" class="margin20">
        <div slot="label" class="label2">
          <div class="hei"><span class="reds"> * </span>{{ $t('merchantInfo.汇款账户') }}</div>
          <div class="wenjian">{{ $t('merchantInfo.支持jpg、jpeg、png格式 最多上传6张 大小单张限制到3m内') }}</div>
        </div>
        <upload :limit="1" :fieldType="'cardnum'"  :acceptType="'.jpg, .jpeg, .png'"  :fileLists="fieldListpicsHuikuan" @UserFileUrl="UserFileUrl"  @DeleterFile="DeleterFile"></upload>
      </el-form-item>


      <el-form-item prop="shop_image" class="margin20">
        <div slot="label" class="label2">
          <div class="hei"><span class="reds"> * </span>{{ $t('merchantInfo.上传公司照片') }}</div>
          <div class="wenjian">{{ $t('merchantInfo.支持jpg、jpeg、png格式 最多上传6张 大小单张限制到3m内') }}</div>
        </div>
        <upload :limit="6" :fieldType="'shop_image'"  :acceptType="'.jpg, .jpeg, .png'"  :fileLists="fieldListpics" @UserFileUrl="UserFileUrl"  @DeleterFile="DeleterFile"></upload>
      </el-form-item>
      <el-form-item class="margin20" prop="video">
        <div slot="label" class="label">
          <div class="hei"><span class="reds"> * </span>{{ $t('merchantInfo.上传公司视频') }}</div>
          <div class="wenjian">{{ $t('merchantInfo.支持mp4、mvb、AVI格式大小限制在35m内') }}</div>
        </div>
        <upload  :fieldType="'video'" :videoUrl="Urlvideo"  :acceptType="'.mp4, .avi, .mvb'"  :type="'video'" @UserFileUrl="UserFileUrl"  @DeleterFile="DeleterFile">
        </upload>
      </el-form-item>
      <el-form-item class="margin20" prop="zhizhao_pics">
        <div slot="label" class="label">
          <div class="hei"><span class="reds"> * </span>{{ $t('merchantInfo.上传营业执照') }}</div>
          <div class="wenjian">{{ $t('merchantInfo.支持jpg、jpeg、png格式 最多上传6张 大小单张限制到3m内') }}</div>
        </div>
        <upload :limit="6" :fieldType="'zhizhao_pics'"  :acceptType="'.jpg, .jpeg, .png'"  :fileLists="fieldListzhizhao_pics" @UserFileUrl="UserFileUrl"  @DeleterFile="DeleterFile">
        </upload>
      </el-form-item>
      <el-form-item prop="scxk_pics" class="margin20">
        <div slot="label" class="label">
          <div class="hei"><span class="reds"> * </span>{{ $t('merchantInfo.上传生产许可') }}</div>
          <div class="wenjian">{{ $t('merchantInfo.支持jpg、jpeg、png格式 最多上传6张 大小单张限制到3m内') }}</div>
        </div>
        <upload :limit="6" :fieldType="'scxk_pics'" :acceptType="'.jpg, .jpeg, .png'" :fileLists="fieldListscxk_pics"  @DeleterFile="DeleterFile" @UserFileUrl="UserFileUrl"></upload>
      </el-form-item>
      <el-form-item prop="vr" class="margin20">
        <div slot="label" class="label2">
          <div class="hei">{{ $t('merchantInfo.上传360全景图片') }}<el-tooltip :visible="visible">
            <template #content>
              <span>{{ $t('merchantInfo.建议您使用手机或者相机全景图片模式进行拍照上传') }}</span>
            </template>
          <el-icon @mouseenter="visible = true" @mouseleave="visible = false"><QuestionFilled /></el-icon>
          </el-tooltip></div>

          <div class="wenjian">{{ $t('merchantInfo.支持jpg、jpeg、png格式 最多上传1张 大小单张限制到30m内') }}</div>
        </div>
        <upload :limit="1" :fieldType="'vr'" :acceptType="'.jpg, .jpeg, .png'" type="360" :fileLists="fieldListvr" @UserFileUrl="UserFileUrl" @DeleterFile="DeleterFile"></upload>
      </el-form-item>
      <el-form-item prop="vr_pic" class="margin20">
        <div slot="label" class="label2">
          <div class="hei">{{ $t('merchantInfo.上传VR公司缩略图') }}</div>
          <div class="wenjian">{{ $t('merchantInfo.支持jpg、jpeg、png格式 最多上传6张 大小单张限制到3m内') }}</div>
        </div>
        <upload :limit="6" :fieldType="'vr_pic'" :acceptType="'.jpg, .jpeg, .png'"  :fileLists="fieldListvr_pic" @UserFileUrl="UserFileUrl" @DeleterFile="DeleterFile"></upload>
      </el-form-item>

      <el-form-item style="float: right; margin-right: 40px;">
        <div class="right-aligned">
          <el-button v-if="firststate" >{{ $t('merchantInfo.取消') }}</el-button>
          <!-- <el-button type="warning">
            {{ $t('merchantInfo.中文转俄文') }}
          </el-button> -->
          <el-button  type="primary" @click="submitForm(ruleFormRef)">
            {{firststate ? $t('merchantInfo.提交修改申请') : $t('merchantInfo.提交入驻申请') }}
          </el-button>
        </div>
      </el-form-item>
    </el-form>
    <rzDialog v-if="rzDialogss" :first="firststate" :paymentObj="paymentObj" @confirmRelease="submitAddGood"
      @closeDialogVisible="closeDialogVisible"></rzDialog>
  </div>
</template>

<script setup lang="ts">
import upload from "@@/components/Upload/index.vue"
import { reactive, ref } from 'vue'
import type { ShopInfo } from "@@/apis/Info/type"
import { UpdateInfo, dfgs, getUserInfo } from "@@/apis/Info"
import type { FormInstance } from 'element-plus'
import { cloneDeep } from "lodash-es"
import { EpPropMergeType } from "element-plus/es/utils/index.mjs"
import rzDialog from "./components/rzDialog/index.vue"
import {  getGoodTranslate } from "@@/apis/good"
const router = useRouter()
import { useI18n } from 'vue-i18n';
const { locale, t } = useI18n();//登录国籍
import { inject } from 'vue'
const CL: any = inject("$CL");
const dsfptoptions = ref([
  {
    name: '全部',
    id: '7,8,9,10',
  },
])
const visible = ref(false)
const rzDialogss = ref(false)
const firststate = ref(false)//判断首次
let paymentObj = ref<object>({});
const isIndeterminate = ref(true)
const formSize = ref<EpPropMergeType<StringConstructor, 'default' | 'small' | 'large', unknown>>('default')
const DEFAULT_FORM_DATA: ShopInfo = {
  logo: '',
  name: '',
  CheckTime: '',
  bg_img: '',
  desc: '',
  content: '',
  address: '',
  address1: '',
  tel: '',
  dfgs_ids: [],
  // PlatformSelectionTwo:'',
  // PlatformSelectionThree:'',
  // PlatformSelectionfour:'',
  // PlatformSelectionfive:'',
  linktel: '',
  linktel1: '',
  StoreAccountThree: '',
  StoreAccountfour: '',
  company_name: '',
  fzr_name: '',
  zdmj: '',
  company_address: '',
  fzr_tel: '',
  yuangong: '',
  shop_image: '',
  video: '',
  zhizhao_pics: '',
  scxk_pics: '',
  vr: '',
  vr_pic: '',
  locale: locale.value,
  isPlatformAccount: 1,
  cardnum: '',
  skr_name: '',
  card_name: '',


}

const validatePass = (rule: any, value: any, callback: any) => {
  if (ruleForm.value.isPlatformAccount == 2) {
    if (value === '') {
      callback(new Error('请输入银行卡号'))
    } else {
      callback()
    }
  } else {
    callback()
  }
}

const validatePass1 = (rule: any, value: any, callback: any) => {
  if (ruleForm.value.isPlatformAccount == 2) {
    if (value === '') {
      callback(new Error('请输入收款人'))
    } else {
      callback()
    }
  } else {
    callback()
  }
}
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (ruleForm.value.isPlatformAccount == 2) {
    if (value === '') {
      callback(new Error('输入开户行名称'))
    } else {
      callback()
    }
  } else {
    callback()
  }
}


const ruleFormRef = ref<FormInstance>()
const ruleForm = ref<ShopInfo>(cloneDeep(DEFAULT_FORM_DATA))



const rules = {
  logo: [{ required: true, message: t('merchantInfo.上传店铺logo'), trigger: 'blur' },],
  cardnum: [{ required: true, message: t('merchantInfo.上传汇款账户'), trigger: 'blur' },],
  name: [{ required: true, message: t('merchantInfo.店铺名称') + t('merchantInfo.不能为空'), trigger: 'blur' },],
  CheckTime: [{ required: true, message: '入驻时间不能为空', trigger: 'blur' },],
  desc: [{ required: true, message: t('merchantInfo.请输入主营业务（200字以内）'), trigger: 'blur' },],
  bg_img: [{ required: true, message: t('merchantInfo.店铺头图不能为空'), trigger: 'change' },],
  // tel: [{ required: true, message: t('merchantInfo.店铺负责人账号') + t('merchantInfo.不能为空'), trigger: 'blur' },],
  content: [{ required: true, message: t('merchantInfo.店铺简介') + t('merchantInfo.不能为空'), trigger: 'blur' },],
  address: [{ required: true, message: t('merchantInfo.发货地址') + t('merchantInfo.不能为空'), trigger: 'blur' },],
  // address1: [{ required: true, message: t('merchantInfo.发货地址2') + t('merchantInfo.不能为空'), trigger: 'blur' },],
  dfgs_ids: [{ required: false, message: t('merchantInfo.代收付平台选择') + t('merchantInfo.不能为空'), trigger: 'blur' },],
  // linktel: [{ required: true, message: t('merchantInfo.店铺客服账号') + t('merchantInfo.不能为空'), trigger: 'blur' },],
  // linktel1: [{ required: true, message: t('merchantInfo.店铺客服账号2') + t('merchantInfo.不能为空'), trigger: 'blur' },],
  company_name: [{ required: true, message: t('merchantInfo.公司名称') + t('merchantInfo.不能为空'), trigger: 'blur' },],
  fzr_name: [{ required: true, message: t('merchantInfo.负责人姓名') + t('merchantInfo.不能为空'), trigger: 'blur' },],
  zdmj: [{ required: true, message: t('merchantInfo.公司占地面积（㎡）') + t('merchantInfo.不能为空'), trigger: 'blur' },],
  company_address: [{ required: true, message: t('merchantInfo.公司地址') + t('merchantInfo.不能为空'), trigger: 'blur' },],
  fzr_tel: [{required: true, message: t('merchantInfo.负责人联系电话'), trigger: 'blur' }],
  yuangong: [{ required: true, message: t('merchantInfo.输入在职员工数量'), trigger: 'blur' },],
  shop_image: [{ required: true, message: t('merchantInfo.上传公司照片'), trigger: 'change' },],
  video: [{ required: true, message: t('merchantInfo.上传公司视频'), trigger: 'change' },],
  zhizhao_pics: [{ required: true, message: t('merchantInfo.上传营业执照'), trigger: 'change' },],
  scxk_pics: [{ required: true, message: t('merchantInfo.上传生产许可'), trigger: 'change' },],
  vr: [{ required: false, message: t('merchantInfo.上传VR公司文件'), trigger: 'change' },],
  vr_pic: [{ required: false, message: t('merchantInfo.上传VR公司缩略图'), trigger: 'change' },],
  // skr_name: [{ validator: validatePass1, message: '输入收款人', trigger: 'change' },],
  // card_name: [{ validator: validatePass2, message: '输入开户行名称', trigger: 'change' },],
}




const fieldListlogo = ref([])
const fieldListpicsHuikuan = ref([])
const fieldListbg_img = ref([])
const fieldListpics = ref([])
const fieldListzhizhao_pics = ref([])
const fieldListvr = ref([])
const fieldListvr_pic = ref([])
const fieldListscxk_pics = ref([])
const Urlvideo = ref('')
const locationOptions = ['Home', 'Company', 'School']

const getDate = () => {
  const today = new Date();
  const year = today.getFullYear();
  const month = today.getMonth() + 1;
  const day = today.getDate();
  const hours = today.getHours();
  const minutes = today.getMinutes();
  const seconds = today.getSeconds();
  // 格式化为 "YYYY-MM-DD HH:mm:ss" 格式
  const formattedDateTime = `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day} ` + `${hours < 10 ? '0' + hours : hours}:${minutes < 10 ? '0' + minutes : minutes}:${seconds < 10 ? '0' + seconds : seconds}`;
  return formattedDateTime
}
ruleForm.value.CheckTime = getDate()
let firstLogin=localStorage.getItem('firstLogin')
let ruleForm_ru=ref()
const submitForm = async (formEl: FormInstance | undefined) => {
  let newData = JSON.parse(JSON.stringify(ruleForm.value));
  newData.dfgs_ids = ruleForm.value.dfgs_ids.join(",");
  let picNum = countPicNum(ruleForm.value);
  let videoNum = !!ruleForm.value.video ? 1 : 0;
    paymentObj.value = {
      picNum: picNum,
      videoNum: videoNum,
    };
  if (!formEl) return
  //vr上传判断
  if(ruleForm.value.vr_pic && !ruleForm.value.vr){
        ElMessage({
        message: t('merchantInfo.请上传360全景图片'),
        type: 'warning',
      })
      return false
  }
  if(!ruleForm.value.vr_pic && ruleForm.value.vr){
      ElMessage({
      message: t('merchantInfo.请上传VR公司缩略图'),
      type: 'warning',
      })
      return false
  }
  await formEl.validate((valid: any, fields: any) => {
    if (valid) {
      ruleForm_ru.value=JSON.parse(JSON.stringify(newData))
        //处理ru国籍部分传参
        let list=['address','address1','company_address','company_name','desc','content','name','fzr_name','skr_name','card_name','skr_name']
        if(locale.value=='ru'){
          for (let key in ruleForm_ru.value) {
            list.forEach((item=>{
              if (key === item) {
                ruleForm_ru.value[key + '_ru'] = ruleForm_ru.value[key]; // 将值赋给新 key
                delete ruleForm_ru.value[key];        // 删除旧的 key
              }
            }))
          }
        }
        console.log(ruleForm_ru.value,'处理之后的数据');
        let obj={}
        if(locale.value=='ru'){
          obj={
            info: {...ruleForm_ru.value,status:firstLogin=="false"?1:0},
          }
        }else{
          obj={
            info: {...newData,status:firstLogin=="false"?1:0},
          }
        }


      UpdateInfo(obj).then((res) => {
          if(res.code==0){
             return
          }else{
            rzDialogss.value=true
            // setTimeout(function(){
            //   location.reload();
            // },1000)
          }
        }).finally(() => {
          // loading.value = false
        })
        // rzDialogss.value=true
      console.log('submit!', ruleForm)
    } else {
      console.log('error submit!', fields)
    }
  })
}
const submitAddGood = async (val: any) => {
  let newData = JSON.parse(JSON.stringify(ruleForm.value));
  newData.dfgs_ids = ruleForm.value.dfgs_ids.join(",");

  switch (val.state) {
    case '0':
        let obj={}
        if(locale.value=='ru'){
         obj=  {
          info: {...ruleForm_ru.value, bus_status:'1',rstatus:'1',rrstatus:'1'},
        }
        }else{
            obj={
            info: {...newData, bus_status:'1',rstatus:'1',rrstatus:'1'},
          }
        }
      UpdateInfo(obj).then(() => {
          if(firststate){
            ElMessage.success(t('common.操作成功'))
            ElMessageBox.alert(t('common.请等待平台确认，我们会尽快处理，谢谢提交申请成功'), {
              confirmButtonText: t('common.确认'),
              customClass: "new_box",
              callback: () => {
                router.back();
              },
            })
          }else{
             ElMessage.success(t('common.操作成功'))
              setTimeout(()=>{
                window.location.reload();
              },800)
          }

        }).finally(() => {
          // loading.value = false
        })
      break;
    case '1':
    let objs={}
        if(locale.value=='ru'){
          objs=  {
            type:'2',
            yf_points: val.payPoints,
            fwids: val.fwids,
            fwnames: val.fwnames,
            bus_status:'1',
            ...ruleForm_ru.value
          }
        }else{
          objs={
            type:'2',
            yf_points: val.payPoints,
            fwids: val.fwids,
            fwnames: val.fwnames,
            bus_status:'1',
            ...newData
          }
        }
    let res = await getGoodTranslate(objs)
      if (res.code === 1 && firststate.value) {
        ElMessage.success(t('common.操作成功'))
        ElMessageBox.alert(t('common.请等待平台确认，我们会尽快处理，谢谢提交申请成功'), {
          confirmButtonText: t('common.确认'),
          customClass: "new_box",
          callback: () => {
            router.back();
          },
        })
      }else{
         ElMessage.success(t('common.操作成功'))
        setTimeout(()=>{
          window.location.reload();
        },800)

      }

      break;

    default:
      break;
  }
  setTimeout(()=>{
    window.location.reload();
  },800)
}
// 计算图片数量
const countPicNum = (val: any) => {
  // debugger
  let nowNum = 0;
  let country = localStorage.getItem('country');
  if (val.logo) {
      nowNum = Math.round(nowNum + val.logo.split(",").length);
    }
    if (val.bg_img) {
      nowNum = Math.round(nowNum + val.bg_img.split(",").length);
    }
    if (val.shop_image) {
      nowNum = Math.round(nowNum + val.shop_image.split(",").length);
    }
  // if (country === "ru") {
    if (val.zhizhao_pics) {
      nowNum = Math.round(nowNum + val.zhizhao_pics.split(",").length);
    }
    if (val.scxk_pics) {
      nowNum = Math.round(nowNum + val.scxk_pics.split(",").length);
    }
    // if (val.vr) {
    //   nowNum = Math.round(nowNum + val.vr.split(",").length);
    // }
  // } else {

  // }
  return nowNum;
}
// 取消
const closeDialogVisible = () => {
  rzDialogss.value = false
}

const UserInfo = async () => {
  let { data } = await getUserInfo()
  console.log(data, '商家信息');
  firststate.value= firstLogin=="false" ? true :false
  ruleForm.value.name = data[CL('name')]
  ruleForm.value.desc = data[CL('desc')]
  ruleForm.value.content = data[CL('content')]
  ruleForm.value.address = data[CL('address')]
  ruleForm.value.address1 = data[CL('address1')]
  ruleForm.value.tel = data.tel
  ruleForm.value.dfgs_ids =data.dfgs_ids?.split(',').map(item => +item) || [];
  ruleForm.value.linktel = data.linktel
  ruleForm.value.linktel1 = data.linktel1
  ruleForm.value.StoreAccountThree = data.StoreAccountThree
  ruleForm.value.StoreAccountfour = data.StoreAccountfour
  ruleForm.value.company_name = data[CL('company_name')]
  ruleForm.value.fzr_name = data[CL('fzr_name')]
  ruleForm.value.zdmj = data.zdmj
  ruleForm.value.company_address = data[CL('company_address')]
  ruleForm.value.fzr_tel = data.fzr_tel
  ruleForm.value.yuangong = data.employee
  ruleForm.value.logo = data.logo

  ruleForm.value.bg_img = data.bg_img
  ruleForm.value.shop_image = data.shop_image
  ruleForm.value.zhizhao_pics = data.zhizhao_pics
  ruleForm.value.vr = data.vr
  ruleForm.value.vr_pic = data.vr_pic
  ruleForm.value.scxk_pics = data.scxk_pics
  ruleForm.value.video = data.video
  ruleForm.value.CheckTime = data.createtime
  ruleForm.value.cardnum = data.cardnum
  ruleForm.value.skr_name = data.skr_name
  ruleForm.value.card_name = data.card_name
  ruleForm.value.isPlatformAccount = data.isPlatformAccount


  // 银行卡信息
  if (data.logo) {
    let array = data.logo.split(",")
    fieldListlogo.value = array.map((item: any, index: any) => ({ ['url']: item }));
  }
  // 汇款账号

  if (data.cardnum) {
    let array = data.cardnum.split(",")
    fieldListpicsHuikuan.value = array.map((item: any, index: any) => ({ ['url']: item }));
  }
  if (data.bg_img) {
    let array = data.bg_img.split(",")
    fieldListbg_img.value = array.map((item: any, index: any) => ({ ['url']: item }));
  }
  if (data.shop_image) {
    let array = data.shop_image.split(",")
    fieldListpics.value = array.map((item: any, index: any) => ({ ['url']: item }));
  }
  if (data.zhizhao_pics) {
    let array = data.zhizhao_pics.split(",")
    fieldListzhizhao_pics.value = array.map((item: any, index: any) => ({ ['url']: item }));
  }
  if (data.vr) {
    let array = data.vr.split(",")
    fieldListvr.value = array.map((item: any, index: any) => ({ ['url']: item }));
  }
  if (data.vr_pic) {
    let array = data.vr_pic.split(",")
    fieldListvr_pic.value = array.map((item: any, index: any) => ({ ['url']: item }));
  }
  if (data.scxk_pics) {
    let array = data.scxk_pics.split(",")
    fieldListscxk_pics.value = array.map((item: any, index: any) => ({ ['url']: item }));
  }
  Urlvideo.value = data.video
  console.log(Urlvideo.value,'sh')


}
UserInfo()
//文件上传返回不同类型
const UserFileUrl = (obj: any) => {
  let type = obj.type
  if (type == 'logo') {
    if (ruleForm.value.logo) {
      ruleForm.value.logo = ruleForm.value.logo.concat(",", obj.url)
    } else {
      ruleForm.value.logo = obj.url
    }
  } else if (type == 'cardnum') {
    if (ruleForm.value.cardnum) {
      ruleForm.value.cardnum = ruleForm.value.cardnum.concat(",", obj.url)
    } else {
      ruleForm.value.cardnum = obj.url
    }

  } else if (type == 'bg_img') {
    if (ruleForm.value.bg_img) {
      ruleForm.value.bg_img = ruleForm.value.bg_img.concat(",", obj.url)
    } else {
      ruleForm.value.bg_img = obj.url
    }
  } else if (type == 'shop_image') {
    if (ruleForm.value.shop_image) {
      ruleForm.value.shop_image = ruleForm.value.shop_image.concat(",", obj.url)
    } else {
      ruleForm.value.shop_image = obj.url
    }

  } else if (type == 'video') {
    // if (ruleForm.value.video) {
    //   ruleForm.value.video = ruleForm.value.video.concat(",", obj.url)
    // } else {
    //   ruleForm.value.video = obj.url
    // }
    ruleForm.value.video = obj.url
  } else if (type == 'zhizhao_pics') {
    if (ruleForm.value.zhizhao_pics) {
      ruleForm.value.zhizhao_pics = ruleForm.value.zhizhao_pics.concat(",", obj.url)
    } else {
      ruleForm.value.zhizhao_pics = obj.url
    }
  } else if (type == 'scxk_pics') {
    console.log(obj,obj.url,'执照执照');

    if (ruleForm.value.scxk_pics) {
      ruleForm.value.scxk_pics = ruleForm.value.scxk_pics.concat(",", obj.url)
    } else {
      ruleForm.value.scxk_pics = obj.url
    }
  } else if (type == 'vr') {
    if (ruleForm.value.vr) {
      ruleForm.value.vr = ruleForm.value.vr.concat(",", obj.url)
    } else {
      ruleForm.value.vr = obj.url
    }
  }else if (type == 'vr_pic') {
    if (ruleForm.value.vr_pic) {
      ruleForm.value.vr_pic = ruleForm.value.vr_pic.concat(",", obj.url)
    } else {
      ruleForm.value.vr_pic = obj.url
    }
  }
};
const handleInput = async (val) => {
  if(val=='linktel' || val=='linktel1' || val=='tel' || val=='fzr_tel'){
    let value = ruleForm.value[val];
    // 确保输入的数字不超过最大长度10
    if (value && value.length > 11) {
      ruleForm.value[val] = value.slice(0, 11); // 截断超出长度的部分
    }
  }else if(val=='zdmj'||val=='yuangong'){
    let value = ruleForm.value[val];
    // 确保输入的数字不超过最大长度10
    if (value && value.length > 10) {
      ruleForm.value[val] = value.slice(0, 10); // 截断超出长度的部分
    }
  }
}
const DeleterFile = (obj: any) => {
  let type = obj.type
  let list=obj.deleterList
  console.log(obj.deleterList,'删除之后返回的图片数组');
  console.log(list,'删除之后返回的图片数组处理之后数据');
  if (type == 'logo') {
    if (ruleForm.value.logo) {
      ruleForm.value.logo = list.map(item => item.response.info ? item.response ? item.response.info.url : item.url : item.url).join(',');
    }else{
      ruleForm.value.logo=''
    }
  } else if (type == 'cardnum') {
    if (ruleForm.value.cardnum) {
      ruleForm.value.cardnum = list.map(item => item.response.info ? item.response ? item.response.info.url : item.url : item.url).join(',');
    }else{
      ruleForm.value.cardnum=''
    }
  } else if (type == 'bg_img') {
    if (ruleForm.value.bg_img) {
      ruleForm.value.bg_img = list.map(item => item.response.info ? item.response ? item.response.info.url : item.url : item.url).join(',');
    }else{
      ruleForm.value.bg_img
    }
  } else if (type == 'shop_image') {
    if (ruleForm.value.shop_image) {
      ruleForm.value.shop_image =list.map(item => item.response ? item.response.info.url : item.url).join(',');
    }else{
      ruleForm.value.shop_image=''
    }
  } else if (type == 'video') {
    ruleForm.value.video = obj.url
  } else if (type == 'zhizhao_pics') {
    if (ruleForm.value.zhizhao_pics) {
      ruleForm.value.zhizhao_pics = list.map(item => item.response ? item.response.info.url : item.url).join(',');
    }else{
      ruleForm.value.zhizhao_pics=''
    }
  } else if (type == 'scxk_pics') {
    if (ruleForm.value.scxk_pics) {
      ruleForm.value.scxk_pics = list.map(item => item.response ? item.response.info.url : item.url).join(',');
    }else{
      ruleForm.value.scxk_pics=''
    }
  } else if (type == 'vr') {
    if (ruleForm.value.vr) {
      ruleForm.value.vr = list.map(item => item.response ? item.response.info.url : item.url).join(',');
    }else{
      ruleForm.value.vr=''
    }
  }else if (type == 'vr_pic') {
    if (ruleForm.value.vr_pic) {
      ruleForm.value.vr_pic = list.map(item => item.response ? item.response.info.url : item.url).join(',');
    }else{
      ruleForm.value.vr_pic=''
    }
  }

};
const getAction = () => {
  return import.meta.env.VITE_BASE_URL + "/?s=ApiImageupload/uploadImg";
};
const getdfgs = async () => {
  let { data } = await dfgs()
  dsfptoptions.value = data
};
getdfgs()


const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}))

// const handleCheckAllChange = (val: boolean) => {
//   checkedCities.value = val ? cities : []
//   isIndeterminate.value = false
// }
// const handleCheckedCitiesChange = (value: string[]) => {
//   const checkedCount = value.length
//   checkAll.value = checkedCount === cities.length
//   isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
// }
</script>

<style lang='scss' scoped>
::deep(.el-form-item__content) {
  display: flex !important;
  justify-content: flex-start !important;
}

.reds {
  color: #f56c6c;
  font-size: 14px;
}

.hei {
  // color: #343434;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.wenjian {
  width: 130px;
  color: #86909C;
  font-size: 12px;
}

.title {
  width: 100%;
  height: 30px;
  color: #1D2129;
  // font-family: "PingFang SC";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.m-right {
  margin-right: 10px;
}

.el-row {
  width: 100%;
  // color: #86909C
}

.right-aligned {
  display: flex;
  justify-content: flex-end;
}

.label {
  margin-top: -50px;
  margin-right: 20px;
}

.label2 {
  margin-top: -40px;
  margin-right: 20px;
}
.margin20 {
  margin: 50px 0 !important;
}
.font16{
  color: #1D2129;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

</style>
